.drawer-panel {
    position: fixed;
    z-index : 100;
    transition: width 0s ease 0.3s, height 0s ease 0.3s,
      transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  }
  
  .drawer-panel>* {
    transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86),
      opacity 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86),
      box-shadow 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  }
  
  .drawer-panel.drawer-panel-open {
    transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  }
  
  .drawer-panel .drawer-panel-mask {
    background: #000;
    opacity   : 0;
    width     : 100%;
    height    : 0;
    position  : absolute;
    top       : 0;
    left      : 0;
    transition: opacity 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86),
      height 0s ease 0.3s;
  }
  
  .drawer-panel-content-wrapper {
    position      : absolute;
    background    : #fff;
    padding-top   : 27px;
    padding-bottom: 2px;
    box-sizing    : border-box;
  }
  
  .drawer-panel-content {
    overflow: auto;
    z-index : 1;
    position: relative;
    padding : '25px 0 8px'
  }
  
  .drawer-panel-handle {
    position       : absolute;
    top            : 72px;
    width          : 41px;
    height         : 40px;
    cursor         : pointer;
    z-index        : 0;
    text-align     : center;
    line-height    : 40px;
    font-size      : 16px;
    display        : flex;
    justify-content: center;
    align-items    : center;
    background     : #fff;
  }
  
  .drawer-panel-handle-icon {
    width     : 14px;
    height    : 2px;
    background: #333;
    position  : relative;
    transition: background 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  }
  
  .drawer-panel-handle-icon:after,
  .drawer-panel-handle-icon:before {
    content   : "";
    display   : block;
    position  : absolute;
    background: #333;
    width     : 100%;
    height    : 2px;
    transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  }
  
  .drawer-panel-handle-icon:before {
    top: -5px;
  }
  
  .drawer-panel-handle-icon:after {
    top: 5px;
  }
  
  .drawer-panel-left,
  .drawer-panel-right {
    width : 0;
    height: 100%;
  }
  
  .drawer-panel-left .drawer-panel-content,
  .drawer-panel-left .drawer-panel-content-wrapper,
  .drawer-panel-right .drawer-panel-content,
  .drawer-panel-right .drawer-panel-content-wrapper {
    height: 100%;
  }
  
  .drawer-panel-left.drawer-panel-open,
  .drawer-panel-right.drawer-panel-open {
    width: 100%;
  }
  
  .drawer-panel-left.drawer-panel-open.no-mask,
  .drawer-panel-right.drawer-panel-open.no-mask {
    width: 0;
  }
  
  .drawer-panel-left {
    top : 0;
    left: 0;
  }
  
  .drawer-panel-left .drawer-panel-handle {
    right        : -40px;
    box-shadow   : 2px 0 8px rgba(0, 0, 0, 0.15);
    border-radius: 0 4px 4px 0;
  }
  
  .drawer-panel-left.drawer-panel-open .drawer-panel-content-wrapper {
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
  }
  
  .drawer-panel-right {
    top  : 0;
    right: 0;
  }
  
  .drawer-panel-right .drawer-panel-content-wrapper {
    right: 0;
  }
  
  .drawer-panel-right .drawer-panel-handle {
    left         : -40px;
    box-shadow   : -2px 0 8px rgba(0, 0, 0, 0.15);
    border-radius: 4px 0 0 4px;
  }
  
  .drawer-panel-right.drawer-panel-open .drawer-panel-content-wrapper {
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
  }
  
  .drawer-panel-right.drawer-panel-open.no-mask {
    right    : 1px;
    transform: translateX(1px);
  }
  
  .drawer-panel-bottom,
  .drawer-panel-top {
    width : 100%;
    height: 0%;
  }
  
  .drawer-panel-bottom .drawer-panel-content,
  .drawer-panel-bottom .drawer-panel-content-wrapper,
  .drawer-panel-top .drawer-panel-content,
  .drawer-panel-top .drawer-panel-content-wrapper {
    width: 100%;
  }
  
  .drawer-panel-bottom .drawer-panel-content,
  .drawer-panel-top .drawer-panel-content {
    height: 100%;
  }
  
  .drawer-panel-bottom.drawer-panel-open,
  .drawer-panel-top.drawer-panel-open {
    height: 100%;
  }
  
  .drawer-panel-bottom.drawer-panel-open.no-mask,
  .drawer-panel-top.drawer-panel-open.no-mask {
    height: 0%;
  }
  
  .drawer-panel-bottom .drawer-panel-handle,
  .drawer-panel-top .drawer-panel-handle {
    left       : 50%;
    margin-left: -20px;
  }
  
  .drawer-panel-top {
    top : 0;
    left: 0;
  }
  
  .drawer-panel-top .drawer-panel-handle {
    top          : auto;
    bottom       : -40px;
    box-shadow   : 0 2px 8px rgba(0, 0, 0, 0.15);
    border-radius: 0 0 4px 4px;
  }
  
  .drawer-panel-top.drawer-panel-open .drawer-panel-content-wrapper {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
  
  .drawer-panel-bottom {
    bottom: 0;
    left  : 0;
  }
  
  .drawer-panel-bottom .drawer-panel-content-wrapper {
    bottom: 0;
  }
  
  .drawer-panel-bottom .drawer-panel-handle {
    top          : -40px;
    box-shadow   : 0 -2px 8px rgba(0, 0, 0, 0.15);
    border-radius: 4px 4px 0 0;
  }
  
  .drawer-panel-bottom.drawer-panel-open .drawer-panel-content-wrapper {
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
  }
  
  .drawer-panel-bottom.drawer-panel-open.no-mask {
    bottom   : 1px;
    transform: translateY(1px);
  }
  
  .drawer-panel.drawer-panel-open .drawer-panel-mask {
    opacity   : 0.3;
    height    : 100%;
    transition: opacity 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  }
  
  .drawer-panel.drawer-panel-open .drawer-panel-handle-icon {
    background: transparent;
  }
  
  .drawer-panel.drawer-panel-open .drawer-panel-handle-icon:before {
    transform: translateY(5px) rotate(45deg);
  }
  
  .drawer-panel.drawer-panel-open .drawer-panel-handle-icon:after {
    transform: translateY(-5px) rotate(-45deg);
  }
  
  .drawer-panel .ant-menu-inline,
  .drawer-panel .ant-menu-vertical {
    border-right: none;
  }
  
  .drawer-panel-content {
    padding-top: 0px;
  }
  
  .drawer-panel-left .ant-menu-inline .ant-menu-item:after,
  .drawer-panel-left .ant-menu-vertical .ant-menu-item:after {
    left : 0;
    right: auto;
  }
  
  .drawer-panel-wrapper .drawer-panel {
    animation          : AlphaTo 0.3s ease-out 0.3s;
    animation-fill-mode: forwards;
    opacity            : 0;
  }
  
  @keyframes AlphaTo {
    to {
      opacity: 1;
      left   : 0;
    }
  }